<template>
  <div
    class="carousel-item-container"
    ref="container"
    @mousemove="handleMouseMove"
  >
    <div class="carousel-img" ref="img" :style="imgPosition">
      <ImageLoader
        :src="item.bigImg"
        :placeholder="item.midImg"
        @load="showWords"
      />
    </div>

    <div class="title" ref="title">{{ item.title }}</div>
    <div class="des" ref="des">{{ item.description }}</div>
  </div>
</template>

<script>
import ImageLoader from "@/components/ImageLoader";

export default {
  name: "Carouselitem",
  props: {
    item: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      titleW: 0,
      desW: 0,
      containerSize: null, //外层容器尺寸
      innerSize: null, //图片尺寸
      mouseX: 0,
      mouseY: 0,
    };
  },
  components: {
    ImageLoader,
  },
  mounted() {
    this.setSize();
    this.mouseX = this.innerSize.width / 2;
    this.mouseY = this.innerSize.height / 2;
    window.addEventListener("resize", this.setSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.setSize);
  },
  computed: {
    //得到元素的宽高
    imgPosition() {
      if (!this.innerSize || !this.containerSize) {
        return;
      }
      //多出的高度和宽度
      const extraWidth = this.innerSize.width - this.containerSize.width;
      const extraHeight = this.innerSize.height - this.containerSize.height;

      const left = (-extraWidth / this.containerSize.width) * this.mouseX;
      const top = (-extraHeight / this.containerSize.height) * this.mouseY;

      return {
        left: left + "px",
        top: top + "px",
      };
    },
  },
  methods: {
    showWords() {
      //显示文字
      this.$refs.title.style.width = 0;
      this.$refs.title.style.opacity = 1;
      this.$refs.des.style.width = 0;
      this.$refs.des.style.opacity = 1;

      this.$refs.title.clientHeight; //引发浏览器渲染

      this.$refs.title.style.transition = "1s";
      this.$refs.title.style.width = this.titleW + "px";
      this.$refs.des.style.transition = "2s 1s";
      this.$refs.des.style.width = this.desW + "px";
    },

    setSize() {
      this.titleW = this.$refs.title.clientWidth;
      this.desW = this.$refs.des.clientWidth;

      this.containerSize = {
        width: this.$refs.container.clientWidth,
        height: this.$refs.container.clientHeight,
      };
      this.innerSize = {
        width: this.$refs.img.clientWidth,
        height: this.$refs.img.clientHeight,
      };
    },

    handleMouseMove(e) {
      var rect = this.$refs.container.getBoundingClientRect();
      this.mouseX = e.clientX - rect.left;
      this.mouseY = e.clientY - rect.top;
    },
  },
};
</script>

<style scoped lang="less">
.carousel-item-container {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  overflow:hidden;

  .carousel-img {
    position: absolute;
    width: 110%;
    height: 110%;
  }
  .title {
    position: absolute;
    left: 30px;
    bottom: 40%;
    font-size: 34px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
  }
  .des {
    position: absolute;
    font-size: 24px;
    left: 40px;
    bottom: 30%;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
  }
}
</style>